<template>
	<view class="pagesContent">
		<view class="pagesContentView">


			<view class="list">
				<view class="item">
					<view class="left">购买渠道</view>
					<view class="right">
						<uni-data-select class="rightSelect" v-model="buyType" :localdata="range" @change="change">
						</uni-data-select>
					</view>
				</view>
				<view class="item" style="margin-bottom: 24rpx">
					<view class="left">
						<text v-if="buyType=='ali'">订单号</text>
						<text v-else>交易单号</text>
					</view>
					<view class="right">
						<input type="text" v-model="orderNo" :placeholder="buyType=='ali' ? '请输入订单号' :'请输入交易单号' "
							placeholder-class="from_pla">
					</view>
				</view>

				<view class="item" style="border: 0;">
					<view class="message">
						<image class="icon" src="../../static/images/point.png" mode=""></image>
						<text class="text">恢复已购买的会员，请提供购买渠道，订单号</text>
					</view>
				</view>
			</view>

			<view class="btn" v-if="btnStatus" @click="findVipUpdata"> 确定 </view>
			<view class="btn btn_disable" v-else> 确定 </view>

			<view class="" style="height: 20rpx;"> </view>
			<adView></adView>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapMutations
	} from "vuex"

	export default {

		data() {
			return {
				title: "恢复会员",
				orderNo: "",
				buyType: "",
				range: [{
						value: "alipay",
						text: "支付宝"
					},
					{
						value: 'wechat',
						text: "微信"
					},

				],
				user: null
			}
		},
		onShow() {
			if (this.hasLogin) {
				uni.reLaunch({
					url: "/pages/user/loginPre"
				})
			} else {

			}
		},
		computed: {
			...mapGetters(["hasLogin"]),
			btnStatus() {
				console.log(0 || 1)
				return this.orderNo != '' && this.buyType != ''
			}
		},
		methods: {
			...mapMutations(["updateUserInfo" , "updateToken"]),
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			change(e) {
				console.log("e:", e);
			},
			findVipUpdata() {
				uni.showLoading({
					mask: true
				})
				let params = {
					order_no: this.orderNo,
					pay_type: this.buyType
				}

				this.$http.post("/api/user/recoverUser", params).then((res) => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 0) {
						this.orderNo = ""
						this.buyType = ""
						this.updateUserInfo(res.data.user_info)
						this.updateToken(res.data.token)

						this.text("恢复会员成功")

					} else {
						this.text(res.message)
					}


				})
			}
		}
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.pagesContent {
		position: fixed;
		top: 40rpx;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 48rpx 48rpx 0 0;
		background: #FFFFFF;
		box-shadow: 0px 0px 32rpx 0px rgba(51, 114, 251, 0.27);
		border-radius: 48rpx 48rpx 0px 0px;
		overflow: hidden;

		.pagesContentView {
			position: relative;
			border-radius: 48rpx 48rpx 0 0;
			width: 100%;
			height: 100%;
			padding-top: 58rpx;
		}
	}

	.list {
		padding: 0 32rpx;
		margin: 0 auto;

		.item {
			height: 96rpx;
			line-height: 96rpx;
			display: flex;
			margin-bottom: 48rpx;


			.left {
				float: left;
				width: 136rpx;
				height: 96rpx;
				font-size: 30rpx;
				font-family: AlibabaPuHuiTi_20;
				font-weight: normal;
				color: $_0F244D;
				line-height: 96rpx;
			}

			.right {
				flex: 1;
				background: #EEF3FF;
				border-radius: 16rpx;

				.rightSelect {
					text-align: right;
					display: block;
					border: 0rpx;
				}

				input {
					height: 96rpx;
					line-height: 96rpx;
					border: 0rpx;
					color: #333333;
					font-size: 28rpx;
					padding: 0 32rpx;
					text-align: left;



				}

				.from_pla {
					color: #999999;
				}


			}

			.message {
				padding: 22rpx 0;

				.icon {
					float: left;
					width: 48rpx;
					height: 48rpx;
					display: block;
					margin-right: 16rpx;
				}

				.text {
					float: left;
					height: 48rpx;
					font-size: 24rpx;
					font-family: AlibabaPuHuiTi_20;
					font-weight: normal;
					color: $_FA4E4E;
					line-height: 48rpx;

				}
			}

		}
	}

	.btn {
		width: 686rpx;
		height: 98rpx;
		background: linear-gradient(0deg, #1073F9, #3A8CFA);
		border-radius: 20rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 98rpx;
		color: #ffffff;
		font-size: 32rpx;
	}

	.btn_disable {
		opacity: 0.3;
	}

	.adViewBox_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}


	.popup_content_vip {
		width: 680rpx;
		height: 600upx;
		background: #FFFFFF;
		border-radius: 12rpx;

		.popup_content_header {
			padding-top: 24rpx;
			height: 136rpx;
			position: relative;

			.title {
				width: 200rpx;
				height: 120rpx;
				display: block;
				margin: 0 auto;
				text-align: center;
				font-weight: 600;

			}

			.close {
				height: 40rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(54, 61, 66, 0.4);
				line-height: 40rpx;
				padding: 0 10rpx;
				position: absolute;
				top: 28rpx;
				right: 32rpx;


			}

		}

		.popup_con {
			.message {
				font-size: 26rpx;
				font-weight: 500;
				color: #363D42;
				line-height: 36rpx;
				text-align: center;
				margin-bottom: 60rpx;
			}

			.from {
				width: 616rpx;
				height: 88rpx;
				border-radius: 44rpx;
				margin: 0 auto 26rpx;
				display: flex;

				.left {
					float: left;
					width: 140rpx;
					height: 88rpx;
					line-height: 88rpx;
					font-size: 24rpx;

					color: #363D42;
				}

				.right {
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;




				}


			}


		}

		.popup_btn {
			width: 616rpx;
			height: 88rpx;
			background: #5C9AFF;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 88rpx;
			letter-spacing: 2rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
		}

		.popup_btn_disable {
			background: rgba(238, 238, 238, 1);
			color: #363D42;
		}

	}
</style>